<template>
    <div class="vMain">
            <el-breadcrumb  separator-class="el-icon-arrow-right" separator="|">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
            </el-breadcrumb>

            <keep-alive>
              <router-view v-if="this.$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!this.$route.meta.keepAlive"></router-view>

            <div class="vTime">
                <span>当前时间：{{date | dateFormat}}</span>
            </div>
    </div>
</template>


<script>

function formatNum(value){
    return value<10?'0'+value:value;
}
export default {
    data(){
        return{
            date:new Date()
        }
    },
    methods:{

    },
    filters:{
        dateFormat(value){
            var date = new Date(value);
            var year = date.getFullYear();
            var month = formatNum(date.getMonth() + 1);
            var day = formatNum(date.getDay());
            var hour = formatNum(date.getHours());
            var minute = formatNum(date.getMinutes());
            var second = formatNum(date.getSeconds());
            return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
        }
    },
    mounted(){
        console.log("模版加载完毕");
        var _this = this;
        var mtimer = setInterval(function(){
            _this.date = new Date();
        },1000);
    },
    beforeDestroy(){
    }
}
</script>

<style scoped>
    /*.vMain{*/
        /*flex:1;*/
        /*background-color: #F0F0F0;*/
        /*height: calc(100vh - 100px);*/
        /*padding:15px;*/
    /*}*/
    /*.vRouter{*/
        /*background-color: #fff;*/
        /*margin-top: 10px;*/
        /*height: calc(100vh - 145px);*/
    /*}*/
    .vTime{
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;

        color: midnightblue;
    }

</style>
